@extends('Admin.index')
@section('css')
    <style>

        .permission-box {
            display: none;
            margin-top: 20px;
        }
        label {
            font-size: 14px;
            font-weight: 600;
            width: 170px;
            margin: 10px  0;
        }

    </style>

@endsection

@section('content')

    <div class="app-third-sidebar">
        <nav class="ui-nav " style="display: block;">
            <ul>
                <li>
                    <a href="/eoa/role/permission/{{$roleID}}"><span>角色权限</span></a>
                </li>
            </ul>
        </nav>
    </div>

    <div class="form-inline" id="wrapper">

        <ul class="nav nav-tabs" role="tablist" id="group-list">
            @foreach($permissionGroup as $group)
                <li role="presentation"><a href="javascript:;" role="tab" data-toggle="tab">{{$group['group_name']}}</a></li>
            @endforeach
        </ul>

        @foreach($permissionGroup as $group)

            <div class="permission-box" id="permission-box-{{$group['group_id']}}">

                <div class="checkbox content">
                    @if(isset($group['list']))
                        @foreach($group['list'] as $permission)
                            <label>
                                @if ( $permission['checked'] == 1 )
                                    <input type="checkbox" class="square-radio redrio" name="permission" data-id="{{$group['group_id']}}" value="{{$permission['permissionID']}}" checked> {{$permission['permissionName']}}
                                @else
                                    <input type="checkbox" class="square-radio redrio" name="permission" data-id="{{$group['group_id']}}" value="{{$permission['permissionID']}}"> {{$permission['permissionName']}}
                                @endif
                            </label>
                        @endforeach
                    @endif
                </div>

                <div class="checkbox">
                    <label class="checkbox-inline">
                        @if($group['selected'] == 1)
                            <input type="checkbox" class="square-radio" name="check-all" value="{{$group['group_id']}}" checked>&ensp;全选
                        @else
                            <input type="checkbox" class="square-radio" name="check-all" value="{{$group['group_id']}}">&ensp;全选
                        @endif
                    </label>
                </div>

            </div>
        @endforeach

        <div class="form-group" style="margin-top: 20px;text-align: center;">
            <button type="button" class="btn btn-default layer-go-back">关闭</button>&nbsp;&nbsp;
            <button type="button" class="btn btn-success" onclick="RolePermission.edit({{$roleID}});">保存</button>
        </div>

    </div>

@endsection

@section('js')

    <script>

        //  单选复选框
        $('.square-radio').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });

        var group_list_obj = $('#group-list');

        group_list_obj.find('li').click(function () {

            var index = $(this).index();

            $('#group-list').find('li').removeClass('active').eq(index).addClass('active');
            $('div[id^="permission-box-"]').hide().eq(index).show();

        });
        group_list_obj.find('li:first').trigger('click');


        $('input[name="check-all"]').on('ifChecked', function () {
            var id = $(this).val();
            $('#permission-box-' + id).find('.content').find('input').iCheck('check');
        }).on('ifUnchecked', function () {
            var id = $(this).val();
            $('#permission-box-' + id).find('.content').find('input').iCheck('uncheck');
        });

        var RolePermission = {

            edit : function(id) {

                var permission_obj = $('input[name="permission"]:checked');
                if (permission_obj.length == 0) {
                    layer.alert('请选择权限', {icon: 2});
                    return false;
                }

                var permission = [];
                $.each(permission_obj, function () {
                    permission.push($(this).val());
                });

                $.ajax({
                    type: 'get',
                    url: '/admin/role/store/permission',
                    data: {
                        permission: permission,
                        id: id
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            layer.confirm('角色保存成功', {
                                btn: ['确定'], //按钮
                                icon: 1,
                                offset: '70px'
                            }, function () {
                                E.layerClose();
                            });
                        } else {
                            layer.alert(res.message, {icon: 2});
                        }
                    }
                });
            }

        };

    </script>
@endsection
